<template>
    <!--
v-for="item in items" 别名 in 原数组
v-for="(item,index) in items" 别名 索引 in 原数组
-->
    <p>学生的姓名</p>
    <ul>
        <li v-for="(item,index ) in stuarr" :key="index">
            {{ item }} == {{ index }}
        </li>
    </ul>
    <p>数组对象</p>
    <ul>
        <li v-for="(item,index ) in stuobj" :key="item.id">
            <span>{{ item.name }}</span>==
            <span>{{ item.age }}</span>==
            <span>{{ item.hobby }}</span>
        </li>
    </ul>
    <p>复杂逻辑对象：</p>
    <div v-for="(key, value) in tedObj">
        {{ value }} ==={{ key }}

    </div>
</template>
<script setup>
import { ref, reactive } from 'vue'
const stuarr = ref(['萧炎', '叶凡', '王麻子', '白小纯'])
const stuobj = ref([
    {
        id: 1001,
        name: '萧炎',
        age: 18,
        hobby:"炼丹"
    },
    {
        id: 1002,
        name: '美杜莎',
        age: 20,
        hobby: "萧炎"
    }, {
        id: 1003,
        name: '小医仙',
        age: 20,
        hobby: "萧炎"
    },
])
const tedObj = reactive(
    {
        name: 'yaolao',
        age: 206,
        Class:"web前端"
    }
)
</script>